<!DOCTYPE html>
<html>
<head>
 <title>专家聊天</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.0/socket.io.js"></script>
 <style>
 #messages { border: 1px solid #ccc; padding: 10px; height: 300px; overflow-y: scroll; }
 input { margin: 5px; }
 button { padding: 5px 10px; }
 </style>
</head>
<body>
 <h1>专家聊天 (123456, ID: 3)</h1>
 <label>发送给用户 (ID): <input id="receiverId" placeholder="用户 ID (如 5)"></label><br>
 <input id="message" placeholder="输入消息">
 <button onclick="sendMessage()">发送</button>
 <button onclick="fetchUsers()">获取用户列表</button>
 <button onclick="fetchMessages()">获取聊天记录</button>
 <div id="users"></div>
 <div id="messages"></div>

 <script>
 const config = {
 token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjozLCJ1c2VybmFtZSI6IjEyMzQ1NiIsImV4cCI6MTc0NDUyNDYyOX0.-G1WEWHlK6WuJ-3RlrPHQjEEhj7QOu5DqUTdShNmwbk",
 userId: 3
 };

 const socket = io('http://s2.gnip.vip:33530', {
 query: { token: config.token }
 });

 socket.on('connect', () => {
 console.log('专家已连接');
 socket.emit('join', { token: config.token });
 });

 socket.on('status', (data) => {
 console.log('状态:', data.message);
 addMessage(`系统: ${data.message}`);
 });

 socket.on('message', (data) => {
 const msg = `${data.sender_id} 对 ${data.receiver_id}: ${data.content} (${data.timestamp})`;
 addMessage(msg);
 });

 socket.on('error', (data) => {
 console.error('错误:', data.message);
 addMessage(`错误: ${data.message}`);
 });

 function sendMessage() {
 const receiverId = document.getElementById('receiverId').value;
 const content = document.getElementById('message').value;
 if (!receiverId || !content) {
 alert('请输入用户 ID 和消息内容');
 return;
 }
 socket.emit('message', {
 token: config.token,
 receiver_id: parseInt(receiverId),
 content: content
 });
 document.getElementById('message').value = '';
 }

 function fetchUsers() {
 fetch('http://s2.gnip.vip:33530/users', {
 headers: {
 'Authorization': `Bearer ${config.token}`
 }
 })
 .then(response => response.json())
 .then(data => {
 const usersDiv = document.getElementById('users');
 usersDiv .innerHTML = '<h3>用户列表:</h3>';
 data.forEach(user => {
 usersDiv.innerHTML += `<p>ID: ${user.id}, 用户名: ${user.username}</p>`;
 });
 })
 .catch(error => {
 console.error('获取用户列表失败:', error);
 addMessage(`错误: 获取用户列表失败`);
 });
 }

 function fetchMessages() {
 const receiverId = document.getElementById('receiverId').value;
 if (!receiverId) {
 alert('请输入用户 ID');
 return;
 }
 fetch(`http://s2.gnip.vip:33530/messages/${receiverId}`, {
 headers: {
 'Authorization': `Bearer ${config.token}`
 }
 })
 .then(response => response.json())
 .then(data => {
 data.forEach(msg => {
 addMessage(`${msg.sender_id} 对 ${msg.receiver_id}: ${msg.content} (${msg.timestamp})`);
 });
 })
 .catch(error => {
 console.error('获取聊天记录失败:', error);
 addMessage(`错误: 获取聊天记录失败`);
 });
 }

 function addMessage(msg) {
 const div = document.createElement('div');
 div.textContent = msg;
 document.getElementById('messages').appendChild(div);
 document.getElementById('messages').scrollTop = document.getElementById('messages').scrollHeight;
 }
 </script>
</body>
</html>